<!--
 * @Author: 专送Pro
 * @Date: 2019-08-08 10:30:12
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-03 09:12:22
 * @Description: 登录页面
 -->

<template>
  <div class="login" :style="{ 'background-image': `url(${login_bg})` }">
    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" :bordered="false">
        <div class="form-con">
          <login-form @on-success-valid="handleSubmit"></login-form>
          <!-- <p class="login-tip">用户名：wuzhen</p>
          <p class="login-tip">密码：123456</p> -->
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import { LoginForm } from "./components";
import { mapActions } from "vuex";
export default {
  components: {
    LoginForm
  },
  data() {
    return {
      login_bg: require("@/assets/images/login-bg.jpg")
    };
  },
  methods: {
    ...mapActions({
      onLogin: "onLogin", // 将 `this.onLogin()` 映射为 `this.$store.dispatch('auth/login')`
      getUserInfoData: "getUserInfoData"
    }),
    // 登录
    async handleSubmit({ account, password }) {
      try {
        const res = await this.onLogin({ account, password });
        if (res.code === 200) {
          // 获取个人信息
          await this.getUserInfoData();
          this.$Message.success("登录成功");
          this.$router.push({
            path: this.$route.query.redirect || "/"
          });
        } else {
          this.$Message.error(res.retinfo);
        }
      } catch (error) {
        throw error;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  &-con {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: 300px;
    &-header {
      font-size: 16px;
      font-weight: 300;
      text-align: center;
      padding: 30px 0;
    }
    .form-con {
      padding: 10px 0 0;
    }
    .login-tip {
      font-size: 10px;
      text-align: center;
      color: #c3c3c3;
    }
  }
}
</style>
